<template>
	<div class="main">
		
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-for="i of lblist"><a href="#"><img :src="i.pic"/></a></div>
		        
			</div>
		    <div class="swiper-pagination"></div>
		</div>
		
		<ul>
			<li v-for="i of xslist">
				<a href="#">
					<div>
						<img :src="i.pic"/>
						<div>
							<div>
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bofangshu"></use></svg>
							</div>
							<span>{{i.play}}万</span>
							<div>
								<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-danmushu"></use></svg>
							</div>
							<span>{{i.video_review}}</span>
						</div>
					</div>
					<p>{{i.title}}</p>
				</a>
			</li>
		</ul>
		<appop></appop>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	import axios from 'axios';
	import appop from "@/components/appop";
	
	const l=10;
	let bt=true;
	let d="";
	let x=0;
	
export default{
	name:"lb",
	updated(){
		
	},
	mounted(){
		this.getsj(),
		this.getsp(),
		this.show()
	},
	data(){
		return{
			lblist:[],
			splist:[],
			xslist:[],
		}
	},
	components:{
		appop
	},
	
	methods:{
		show(){
			window.addEventListener('scroll',()=>{
				d=document.body||document.documentElement;
				x=Math.floor((d.offsetHeight-d.scrollTop)/d.offsetHeight*10);
				console.log(x)
				if(x<=4&&this.splist.length){
					let n=this.splist.splice(0,10)
					this.xslist=this.xslist.concat(n)
				}
			})
		},
		
		getsj(){
			axios.get('/lbtu').then((res)=>{
					this.lblist=res.data.data
				}).then(()=>{
					var mySwiper = new Swiper ('.swiper-container', {
						    loop: true,
						    autoplay: {
						    	delay:1000,
						    },
						    // 如果需要分页器
						    pagination: {
						      el: '.swiper-pagination',
						    },
						    
						})
				})
		},
		getsp(){
			axios.get('/sp').then((a)=>{
					a.data.list.forEach(function(el){
						el.play=(el.play/10000).toFixed(1);
					})
					this.splist=a.data.list;
				}).then(()=>{
					this.xslist=this.splist.splice(0,20)
				})
		}
		
		
	}
	
}

</script>

<style lang="scss">
	@import url("../commont/css/swiper-4.1.0.min.css");
	.swiper-container {
    width: 100%;
    height: 100px;
    >div{
    	width: 100%;
    	height: 100%;
    	a{
    		display:block;
    		width: 100%;
    		height: 100%;
    		>img{
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
}  
	.main{
		padding-top: 85px;
		>ul{
			width: 100%;
			>li{
				display: inline-block;
				width: 46%;
				margin: 1.5% 2%;
				>a{
					display: inline-block;
					width: 100%;
					height: 100%;
					>div{
						position: relative;
						width: 100%;
						img{
							width: 100%;
						}
						>div{
							
							height: 20px;
							position: absolute;
							bottom: 2px;
							div{
								vertical-align: middle;
								width: 16px;
								display:inline-block;
								height: 16px;
								svg{
									width: 20px;
									display:inline-block;
									height: 100%;
									fill:#fff;
								}
								&:first-of-type{
									margin-left: 5px;
								}
								&:last-of-type{
									margin-left: 33px;
								}
							}
							span{
								font-size: 14px;
								line-height: 16px;
								vertical-align: middle;
								color: #FFFFFF;
							}
							
						}
					}
					>p{
						font-size: 14px;
					    color: #212121;
					    letter-spacing: 0;
					    line-height: 20px;
					    text-align: left;
					    width: 100%;
					    height: 40px;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    -webkit-line-clamp: 2;
					    display: -webkit-box;
					    -webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>